<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2025-04-21 16:35:57
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2025-04-21 20:07:31
 * @FilePath: \micro-app-main\src\views\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="login-container">
    <canvas ref="canvas" class="background-canvas"></canvas>
    <div class="login-content">
      <h1>Login</h1>
      <!-- Add your login form here -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";

const canvas = ref<HTMLCanvasElement | null>(null);

onMounted(() => {
  if (!canvas.value) return;

  const ctx = canvas.value.getContext("2d");
  if (!ctx) return;

  const particles: { x: number; y: number; vx: number; vy: number }[] = [];
  const particleCount = 100;
  const canvasWidth = window.innerWidth;
  const canvasHeight = window.innerHeight;

  canvas.value.width = canvasWidth;
  canvas.value.height = canvasHeight;

  for (let i = 0; i < particleCount; i++) {
    particles.push({
      x: Math.random() * canvasWidth,
      y: Math.random() * canvasHeight,
      vx: (Math.random() - 0.5) * 2,
      vy: (Math.random() - 0.5) * 2,
    });
  }

  const animate = () => {
    if (!ctx || !canvas.value) return;

    ctx.clearRect(0, 0, canvasWidth, canvasHeight);

    particles.forEach((particle) => {
      particle.x += particle.vx;
      particle.y += particle.vy;

      if (particle.x < 0 || particle.x > canvasWidth) particle.vx *= -1;
      if (particle.y < 0 || particle.y > canvasHeight) particle.vy *= -1;

      ctx.beginPath();
      ctx.arc(particle.x, particle.y, 2, 0, Math.PI * 2);
      ctx.fillStyle = "#ffffff";
      ctx.fill();
    });

    requestAnimationFrame(animate);
  };

  animate();
});
</script>

<style lang="scss" scoped>
.login-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #1e1e2f;

  .background-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .login-content {
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: center;
    padding-top: 20vh;
  }
}
</style>
